<template>
  <el-dialog
    title="修改密码"
    :visible="show"
    :append-to-body="true"
    width="500px"
    @close="close"
    center>
    <div class="edit-menu-dialog-box">

      <!-- 邮箱 -->
      <div class="input-box">
        <div class="input-title">邮箱</div>
        <el-input 
          :disabled="true" 
          v-model="email"/>
      </div>

      <!-- 验证码 -->
      <div class="input-box">
        <div class="input-title">验证码</div>
        <el-input v-model="smsCode" maxlength="4" placeholder="输入验证码">
          <el-button 
            :disabled="getCodeBtnCountDown" 
            slot="suffix" 
            type="primary" 
            size="mini" 
            plain 
            @click="getSmsCode"
            >{{getCodeBtnText}}</el-button>
        </el-input>
      </div>

      <!-- 密码 -->
      <div class="input-box">
        <div class="input-title">密码</div>
        <el-input 
          id="password"
          :disabled="smsCode.length != 4" 
          v-model="password" 
          placeholder="设置密码" 
          show-password 
          clearable></el-input>
      </div>
    </div>
    <span slot="footer" class="add-menu-dialog-footer">
      <el-button type="primary" size="medium" @click="commit">更改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Api from "@/utils/api.js";
import LocalStorage from "@/utils/localStorage.js"
import CC from '@/utils/cc.js'
let interval;

export default {
  /**
   * show，显示
   * name，用户名
   */
  props: ["show", 'email'],

  data(){
    return{
      getCodeBtnCountDown: false,
      getCodeBtnText:"立即获取",

      smsCode : "",
      password : "",
    }
  },

  methods:{
    close(){
      this.$emit('close')
    },

    commit(){
      // 请求接口
      this.$axios.post(Api.USER_INFO_PASS_WORD, {
        password : CC.encryptPassword(this.password),
        code : this.smsCode
      }).then( res =>{
        LocalStorage.setItem("USER_INFO", res)
        this.close()
        this.$message.success("修改成功！");
      }).catch(res =>{
        this.$message.warning(res.message);
      })
    },

    // 获取注册验证码
    getSmsCode(){
      this.getCodeBtnCountDown = true
      this.$axios.post(Api.SMS_CHANGE_PW_CODE).then( _ =>{
        // 提示查收
        this.$message.success("已发送验证码，请查收！");
        // 验证码倒计时
        this.countDown(60)

      }).catch(res =>{
        // 初始化验证码获取按钮状态
        this.getCodeBtnCountDown = false
        // 提示失败
        this.$message.warning(res.message);
      })
    },

    // 验证码倒计时
    countDown(time){

      // 倒计时初始化
      clearInterval(this.interval)
      this.getCodeBtnText = time + "s"

      this.interval = setInterval(() => {
        if(time > 0){
          time --;
          this.getCodeBtnText = time + "s"
        }
        else{
          clearInterval(interval);
          this.getCodeBtnText = '重新获取';
          this.getCodeBtnCountDown = false;
        }
      }, 1000)
    },
    
  }
}
</script>

<style lang="less">
@import '@/assets/css/index.less';

.edit-menu-dialog-box{
  padding-top: 20px;
  padding-bottom: 20px;

  .input-box{
    padding: 10px 60px;
    .flex-center-start();

    .input-title{
      white-space: nowrap;
      font-size: 14px;
      color: #353535;
      margin-right: 10px;
      width: 60px;
      text-align: justify;
      text-align-last: justify;
    }

    .select-img{
      cursor: pointer;
      color: #409EFF;
      font-size: 12px;
      margin-left: 20px;
      position: relative;
    }

    .el-input, .el-autocomplete{
      flex: 1;
      
      .el-input__prefix, .el-input__suffix{
          .flex-center-center();
      }
    }
  }
}

// 底部按钮
.add-menu-dialog-footer{
  
  .el-button{
    width: 200px;
  }
}
</style>
